<template>
<div class="introduce">

  <div class="history">
    <history-card v-for="item in card_data" :item="item" v-show="item.isShow" :changeActive="changeActive"></history-card>
    <div class="selector">
    <el-slider v-model="activeCard" :step="1" show-tooltip show-stops :max="5">
    </el-slider>
   </div>
</div>
</div>
</template>

<script>
import historyCard from '../../components/HistoryCard.vue'
export default {
  name: "Index",
  watch:{
    activeCard(val,oldVal){
      this.card_data.forEach(function(item){
        item.isShow = item.id === val;
      })
    }
  },
  components:{historyCard},
  beforeRouteEnter(to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector('body').setAttribute('style', 'margin:0;padding:0;')
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 去除背景色
    document.querySelector('body').setAttribute('style', '')
    next()
  },
  data(){
    return{
      activeCard: 0,
      card_data:[
        {id:0,title:'初出茅庐',content:'我院于20XX年在XX市XX区建立，是一座富有时代气息的新生代医院',isShow:true,pics:'/history/1.jpg'},
        {id:1,title:'枝叶繁茂',content:'经过长期发展，我院规模越发壮大，不逊色于老牌医院',isShow:false,pics:'/history/2.jpg'},
        {id:2,title:'根深蒂固',content:'岁月更替，我院茁壮成长，誉满全球',isShow:false,pics:'/history/3.jpg'},
        {id:3,title:'引领全球',content:'我院先进的医疗技术，带动了全球医疗水平的提升，成为国际医学的领头羊',isShow:false,pics:'/history/4.jpg'},
        {id:4,title:'业界标杆',content:'我院人才辈出，XXX同志在20XX年，荣获诺贝尔医学奖，成为医学界的一座标杆',isShow:false,pics:'/history/5.jpg'},
        {id:5,title:'一马当先',content:'20XX年，疫情爆发，我院在抗疫中身先士卒，为抗疫做出了可观的贡献，也让我院再次获得各国各界的赞赏',isShow:false,pics:'/history/6.jpg'},
      ],
    }
  },
  methods:{
    changeActive(val){
      if (val===true){
        this.activeCard++
      }
      else
        this.activeCard--
      if (this.activeCard > this.card_data.length-1)
        this.activeCard = 0
      if (this.activeCard < 0)
        this.activeCard = this.card_data.length
    }
  }
}
</script>

<style scoped>
::v-deep(.el-slider__stop){
  background: #00a4ff;
  height: 5px;
  width: 10px;
}
.introduce{
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: space-around;
  margin-top: 40px;
}
.selector{
  width: 1000px;
}
</style>